<template>
  <div id="roomView">
    <div class="g-container">
      <a-tabs default-active-key="list" :destroy-on-hide="true" :animation="true">
        <a-tab-pane v-for="tab in tabs" :key="tab.key" :title="tab.tabName">
          <component :is="tab.tabComponent"></component>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import RoomList from "/src/components/room/AllList.vue";
import MyList from "../../components/room/MyList.vue";
import ApplicationList from "../../components/room/ApplicationList.vue";

const tabs = ref([
  {
    key: "list",
    tabName: "房间列表",
    tabComponent: RoomList
  },
  {
    key: "my",
    tabName: "我的房间",
    tabComponent: MyList
  },
  {
    key: "create",
    tabName: "申请记录",
    tabComponent: ApplicationList
  },
])
</script>

<style scoped>

</style>
